<template>
    <div style="padding: 20px">
      <el-card shadow="never" :body-style="{ padding: '20px' }">
        <div slot="header">
          <span>基本信息</span>
        </div>
        <!-- card body -->
        <BaseForm
          labelWidth="160px"
          :inline="true"
          :fromIems="fromIems"
          ref="BaseForm"
          @submit="submit"
          @edit="edit"
        ></BaseForm>
      </el-card>
      <el-card
        shadow="never"
        :body-style="{ padding: '20px' }"
        style="margin-top: 16px"
      >
        <div slot="header">
          <span>商品明细</span>
        </div>
        <vxe_table
          ref="Cx_table"
          :options="options"
          @handleTableBtn="handleTableBtn"
        >
          <template #btn>
            <el-button type="success" size="small" @click="add">添加</el-button>
          </template>
  
          <template #search="{ row, index }">
            <SearchPoduct
              :ref="'SearchPoduct'+index"
              v-model="row.code"
              @input="handleSetRowData"
              :index="index"
            ></SearchPoduct>
          </template>
          <template #nums="{ row }">
            <el-input-number
              v-model="row.nums"
              placeholder=""
              clearable
            ></el-input-number>
          </template>
          <template #price="{ row }">
            <el-input-number
              v-model="row.price"
              placeholder=""
              clearable
              :step="0.1"
              :max="100000"
              :min="0.0"
            ></el-input-number>
          </template>
          <template #remark="{ row }">
            <el-input type="textarea" v-model="row.remark" clearable></el-input>
          </template>
        </vxe_table>
      </el-card>
      <el-button type="primary" size="default" @click="handlesubmit"></el-button>
    </div>
  </template>
  
  <script>
  import SearchPoduct from "@/components/select/searchPoduct.vue";
  import Cx_table from "@/components/table/cx_table.vue";
  import tableMixin from "@/mixins";
  export default {
    mixins: [tableMixin],
    components: {
      Cx_table,
      SearchPoduct,
    },
    data() {
      return {
        selectedOption: "null",
        fromIems: [
          {
            valueType: "input",
            label: "订单号",
            dataIndex: "currencyName",
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "date",
            label: "开单日期",
            dataIndex: "tme",
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "select",
            label: "开单人",
            dataIndex: "a",
            options: [],
            search: true,
            searchFn: (query) => {
              console.log(query, "---");
            },
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "select",
            label: "客户名称",
            dataIndex: "name",
            options: [],
            search: true,
            searchFn: (query) => {
              console.log(query, "---");
            },
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "date",
            label: "交货日期",
            dataIndex: "jh",
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "switch",
            label: "是否含税",
            dataIndex: "sp",
            props: {
              activeText: "是",
              inactiveText: "否",
            },
            onChange: (e) => {
              console.log(e);
            },
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "inputNumber",
            label: "税点",
            dataIndex: "sd",
            hide: (data) => {
              return data.sp == true;
            },
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "inputNumber",
            label: "不含税金额",
            dataIndex: "sd",
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "inputNumber",
            label: "含税金额",
            dataIndex: "sd",
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "inputNumber",
            label: "税金",
            dataIndex: "sd",
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "inputNumber",
            label: "服务费",
            dataIndex: "sd",
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "date",
            label: "起租日期",
            dataIndex: "jh",
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "date",
            label: "租止日期",
            dataIndex: "jh",
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "inputNumber",
            label: "运费",
            dataIndex: "sd",
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "switch",
            label: "是否开发票",
            dataIndex: "sp",
            props: {
              activeText: "是",
              inactiveText: "否",
            },
            onChange: (e) => {
              console.log(e);
            },
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "switch",
            label: "是否加急",
            dataIndex: "sp",
            props: {
              activeText: "是",
              inactiveText: "否",
            },
            onChange: (e) => {
              console.log(e);
            },
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "input",
            label: "收货人",
            dataIndex: "currencyName",
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "input",
            label: "物流公司",
            dataIndex: "currencyName",
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "input",
            label: "物流单号",
            dataIndex: "currencyName",
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "input",
            label: "收货电话",
            dataIndex: "currencyName",
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "input",
            type: "textarea",
            label: "详细地址",
            dataIndex: "currencyName",
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
          {
            valueType: "input",
            label: "备注",
            dataIndex: "currencyName",
            rules: [{ required: true, message: "请输入", trigger: "blur" }],
          },
        ],
        tableOptions: {
          hideSearch: true,
          cols: [
            {
              props: "code",
              label: "商品编码",
              type: "slot",
              slotName: "search",
            },
            {
              props: "type",
              label: "商品型号",
            },
            {
              props: "name",
              label: "名称",
            },
  
            {
              props: "nums",
              align: "center",
              label: "数量",
              type: "slot",
              slotName: "nums",
            },
            {
              props: "price",
              align: "center",
              label: "服务费",
              type: "slot",
              slotName: "price",
            },
            {
              props: "remark",
              label: "备注",
              type: "slot",
              slotName: "remark",
            },
          ],
          finalColWidth: 100,
          handle: [
            {
              txt: "删除",
              handleName: "handleDel",
              type: "danger",
            },
          ],
        },
        options: {
          id: "add",
          hideSearch: true,
          hideExport: true,
          columns: [
            { field: "seq", type: "seq", title: "排序" },
            { field: "type", title: "商品型号", slot: "search" },
            { field: "name", title: "商品名称" },
            { field: "nums", title: "商品数量", slot: "nums" },
            { field: "price", title: "服务费", slot: "price" },
            { field: "remark", title: "备注", slot: "remark" },
          ],
          btn: [
            {
              title: "删除",
              handleName: "handleDel",
              type: "danger",
            },
          ],
        },
      };
    },
    mounted() {
      let arr = [{
        code: 1,
        type: "x01",
        name: "商品1",
        price: 40.0,
        remark: "备注2",
        nums: 22,
      },
      {
        code: 3,
        type: "x01",
        name: "商品1",
        price: 30.0,
        remark: "备注1",
        nums: 11,
      }]
      this.$refs.Cx_table.tableData = arr
      arr.forEach((el,index)=>{
        setTimeout(()=>{
          this.$refs[`SearchPoduct${index}`].remoteMethod(el.name)
        },500)
      })
    },
    methods: {
      submit() {},
      edit() {},
      add() {
        this.$refs.Cx_table.tableData.push({
          code: null,
          type: null,
          name: null,
          price: 1.0,
          remark: null,
          nums: 20,
        });
      },
      handleSetRowData(val, row, index) {
        console.log(val, row, index, "组件返回值-----------------");
        console.log(this.$refs.Cx_table.tableData, "表格数据xxxxxxxxxxxxxxxxxxxxxxxxxx");
        this.$refs.Cx_table.tableData[index].type = row.type;
        this.$refs.Cx_table.tableData[index].name = row.name;
      },
      handlesubmit() {
        console.log(this.$refs.BaseForm.formData);
        console.log(this.$refs.Cx_table.tableData);
      },
      handleDel(row, index) {
        console.log(row, index);
        this.$refs.Cx_table.tableData.splice(index, 1);
      },
    },
  };
  </script>
  